<template>
  <div class="container a-container" id="a-container" :class="{istxl:!index.isshow}">
    <form action="" method="" class="form" id="a-form">
        <h2 class="form_title title">创建账号</h2>
        <div class="form_icons">
            <i class="iconfont icon-QQ"></i>
            <i class="iconfont icon-weixin"></i>
            <i class="iconfont icon-bilibili-line"></i>
        </div>
        <span class="form_span">选择注册方式活电子邮箱注册</span>
        <input type="text" class="form_input" placeholder="username" v-model="username" @blur="onBlur">
        <input type="text" class="form_input" placeholder="Email" @focus="onfocus" v-model="email">
        <el-button type="info" id="btn_yz" v-show="isshow" @click="send" :disabled="isdis" v-text="text"></el-button>
        <input type="text" class="form_input" placeholder="code" v-model="code">
        <input type="password" class="form_input" placeholder="Password" v-model="password">
        <button type="button" class="form_button button submit" @click="submit" >注册</button>
    </form>
  </div>
</template>

<script>
import {ref} from 'vue'
import {userindex} from'@/stores/index'
import api from '@/utils/request';
import { ElMessage } from 'element-plus'
import {emailVerify,pswVerify,qufan} from '@/hooks/login.js'
import {user} from '@/stores/user'
import {storeToRefs} from 'pinia'

export default {
  name: 'left',
  setup(){
    const index=userindex()
    let isshow =ref(false)
    let isdis=ref(false)
    let text =ref('发送验证码')
    let i=60;
    let email =ref();
    let username =ref()
    let password =ref();
    let code=ref();
    let sub=ref(false);
    const userimpl =user();
    const {userstor} =storeToRefs(userimpl);
    // console.log(userimpl.userstor.id);

    function onfocus(){
      isshow.value=true
    }

    function send(){  
      isdis.value=true
      text.value=i+'秒后可发送'
      
      const sendSt=setInterval(() => {
        i--;
        text.value=i+'秒后可发送'
        if (i==0) {
          text.value='发送验证码'
          clearInterval(sendSt);
          isdis.value=false
          isshow.value=false
        }
      }, 1000);

      if(emailVerify(email.value)){
        ElMessage.success('发送成功！')
        api.get('email/getEmailCode?email='+email.value)
        .then((response) => {

        })
        .catch((error) => {
          ElMessage.error(error.message)
        });  
      }else{
        ElMessage.error('邮箱格式有误！！！！')
      }
    }

    function onBlur(){
      if(username.value){
        api.get('admin-info/getCountByName?username='+username.value)
        .then((response) => {
          if(response.code==200){
            sub.value=true
            ElMessage({
              message: response.message,
              grouping: true,
              type: 'success',
            })
          }else{
            sub.value=false
            ElMessage({
              message: response.message,
              grouping: true,
              type: 'error',
            })
          }
        })
        .catch((error) => {
          ElMessage.error(error.message)
        });  
      }else{
        ElMessage({
          message: '用户名不能为空！',
          grouping: true,
          type: 'error',
        })
      }
    }

    function submit(){
      if(username.value&&sub.value){
        if(emailVerify(email.value)){
          if(code.value){
            if(pswVerify(password.value)){
              // console.log('可以发送了');
              
              api.post('/admin-login/register',{'username':username.value,'password':password.value,'email':email.value,'code':code.value})
              .then((response) => {
                if(response.data.admin){
                  userimpl.userstor.username=response.data.admin.adminUsername
                  userimpl.userstor.password=response.data.admin.adminPassword
                  // console.log(userimpl.userstor.password);
                  qufan()
                }
              })
              .catch((error) => {
                ElMessage.error(error.message)
              });  
            }
            else{
              ElMessage({
              message: '密码格式错误！',
              grouping: true,
              type: 'error',
            })
            }
          }else{
            ElMessage({
              message: '验证码不能为空！',
              grouping: true,
              type: 'error',
            })
          }
        }else{
          ElMessage({
              message: '邮箱格式有误！',
              grouping: true,
              type: 'error',
            })
        }
      }else{
        ElMessage({
          message: '用户名重复或为空！',
          grouping: true,
          type: 'error',
        })
      }
    }
    return {index,isshow,onfocus,onBlur,send,isdis,text,email,username,submit,code,password}
  }
};
</script>

<style scoped>
 .a-container {
  z-index: 100;
  left: calc(100% - 600px);
}
.istxl {
  left: 0;
  transition: 1.25s;
  transform-origin: right;
}
#btn_yz{
  position: absolute;
  top: 50.75%;
  left:59%;
}
</style>